import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
	Modal,
	Select,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;

//修改表单
@Form.create()
class UpdateForm extends PureComponent {
    static defaultProps = {
        handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
values: {},
};

constructor(props) {
    super(props);
    this.state = {
        formVals: {
            id: props.values.id,
            parentid:props.values.parentid,
            levelcode: props.values.levelcode,
            text: props.values.text,
            href: props.values.href,
            enable: props.values.enable,
            component: props.values.component,
            i18n_name: props.values.i18n_name,
            redirect: props.values.redirect,
            
            recordid: props.values.recordid,
            icon: props.values.icon,
            hideInMenu: props.values.hideInMenu,
        },
    };

}

   handleLocalUpdate = () => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState(
        {
          formVals,
        }
      );
     
     handleUpdate(formVals);

    });
};


renderContent = (formVals) => {
    const { form,values:{type} } = this.props;
    return (
<Form  layout="vertical" >
{type == 1?(
	<div>
		<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="菜单名称">
		            {form.getFieldDecorator('text', {
		            rules: [{ required: true, message: '请输入菜单名称！', min: 1 }],
		            initialValue: formVals.text,
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="链接">
		            {form.getFieldDecorator('href', {
		            rules: [{ required: true, message: '请输入链接！', min: 1 }],
		            initialValue: formVals.href,
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
			
	
	
	    </Row>
	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="国际化菜单名">
		            {form.getFieldDecorator('i18n_name', {
		            rules: [{ required: true, message: '请输入国际化菜单名！', min: 1 }],
		            initialValue: formVals.i18n_name,
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	        <Col md={12} sm={24}>
		        <FormItem label="状态">
		            {form.getFieldDecorator('enable',{
		            	initialValue: formVals.enable + "",
		            })(
		                <Select placeholder="请选择" style={{ width: '100%' }}>
		                    <Option value="1">可用</Option>
		                    <Option value="0">禁用</Option>
		                </Select>
		            )}
		        </FormItem>
	        </Col>
	
	    </Row>
	   	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	    
	        <Col  md={12} sm={24}>
		        <FormItem  label="路由组件">
		            {form.getFieldDecorator('component', {
		            rules: [{ required: false, message: '请输入路由组件！', min: 1 }],
		            initialValue: formVals.component,
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	        <Col  md={12} sm={24}>
		        <FormItem  label="路由重定向">
		            {form.getFieldDecorator('redirect', {
		            rules: [{ required: false, message: '请输入路由重定向！', min: 1 }],
		            initialValue: formVals.redirect,
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	    </Row>
    </div>
):(
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={24} sm={48}>
	        <FormItem  label="按钮名称">
	            {form.getFieldDecorator('text', {
	            rules: [{ required: true, message: '请输入按钮名称！', min: 1 }],
	            initialValue: formVals.text,
	            })(<Input placeholder="请输入" />)}
	        </FormItem>
        </Col>
        

    </Row>
)}
    
    
    
</Form>
);

};



render() {
    const { updateModalVisible, handleUpdateModalVisible, values} = this.props;
    const {  formVals } = this.state;

    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title={values.type == 1?"修改菜单":"修改按钮"}
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default UpdateForm;